<template>
	<view class="container">
		<view style="width: 100%; text-align: center;height: 90upx;	position: fixed;z-index: 99; ">
			<scroll-view id="nav-bar" class="nav-bar" scroll-x>
				<view class="nav-item" :class="{'current': 0 === tabCurrentIndex}" @click="changeTab(0)">
					寄件地址
				</view>
				<view class="nav-item" :class="{'current': 1 === tabCurrentIndex}" @click="changeTab(1)">
					收件地址
				</view>
			</scroll-view>
		</view>
		<scroll-view class="panel-scroll-box" scroll-y>
			<swiper id="swiper" class="swiper-box" :duration="300" :current="tabCurrentIndex" @change="changeTabSwiper">
				<swiper-item>
					<scroll-view scroll-y style="height: 100%;">
						<view class="record-box">
							<empty v-if="senderList.length == 0"></empty>
							<view class="record-item" v-for="(senderItem,senderIndex) in senderList" :key="senderIndex" v-else>
								<view @click="goToLast(senderItem)">
									<view class="info-name">
										<view class="item-class">
											{{senderItem.realName}}
										</view>
										<view class="item-class" style="margin-left: 20upx;">
											{{senderItem.userPhone}}
										</view>
									</view>
									<view class="info-address">
										{{senderItem.province + senderItem.city + senderItem.county + senderItem.address}}
									</view>
								</view>
								<view style="margin-top: 14upx;padding-right: 10upx;display: flex;flex-direction: row;justify-content: flex-end;">
									<view @click="updateAddress(senderItem)">
										<uni-icons type="compose" size="14"></uni-icons>编辑
									</view>
									<view @click="deleteAddress(senderItem)">
										<uni-icons type="trash-filled" size="14" style="margin-left: 20upx;"></uni-icons>删除
									</view>
								</view>
							</view>
						</view>
					</scroll-view>
				</swiper-item>
				<swiper-item>
					<scroll-view scroll-y style="height: 100%;">
						<view class="record-box">
							<empty v-if="receiverList.length == 0"></empty>
							<view class="record-item" v-for="(receiverItem,receiverIndex) in receiverList" :key="receiverIndex" v-else>
								<view @click="goToLast(receiverItem)">
									<view class="info-name">
										<view class="item-class">
											{{receiverItem.realName}}
										</view>
										<view class="item-class" style="margin-left: 20upx;">
											{{receiverItem.userPhone}}
										</view>
									</view>
									<view class="info-address">
										{{receiverItem.province + receiverItem.city + receiverItem.county + receiverItem.address}}
									</view>
								</view>
								<view style="margin-top: 14upx;padding-right: 10upx;display: flex;flex-direction: row;justify-content: flex-end;">
									<view @click="updateAddress(receiverItem)">
										<uni-icons type="compose" size="14"></uni-icons>编辑
									</view>
									<view @click="deleteAddress(receiverItem)">
										<uni-icons type="trash-filled" size="14" style="margin-left: 20upx;"></uni-icons>删除
									</view>
								</view>
							</view>
						</view>
					</scroll-view>
				</swiper-item>
			</swiper>
		</scroll-view>
		<view class="bottom_box" @click="gotoAddAddress">
			+
		</view>
	</view>
</template>

<script>
	import mixLoadMore from '@/components/mix-load-more/mix-load-more.vue'
	import empty from '@/components/empty.vue'
	export default {
		data() {
			return {
				tabCurrentIndex: 0,
				page: 1,
				pageSize: 5,
				total: 0,
				senderList: [],
				receiverList: [],
				userId: uni.getStorageSync("userInfo").userUuid,
			}
		},
		onLoad(options) {
			if (options && options.addressType) {
				this.tabCurrentIndex = Number.parseInt(options.addressType)
			}
		},
		onShow(options) {
			this.senderList = [];
			this.receiverList = [];
			this.queryExpressAddress()
		},
		components: {
			empty,
			mixLoadMore
		},
		methods: {
			queryExpressAddress() {
				let params = {
					page: this.page,
					pageSize: this.pageSize,
					userId: this.userId,
					addressType: this.tabCurrentIndex
				}
				this.$api.request.queryExpressAddress(params, (res) => {
					if (res.code == 200) {
						this.total = Number.parseInt(res.data.total);
						if (this.tabCurrentIndex == 0) {
							this.senderList = this.senderList.concat(res.data.records);
						} else {
							this.receiverList = this.receiverList.concat(res.data.records);
						}
					}
				})
			},
			changeTab(index) {
				this.tabCurrentIndex = index;
			},
			changeTabSwiper(e) {
				this.tabCurrentIndex = e.detail.current;
				this.senderList = [];
				this.receiverList = [];
				this.queryExpressAddress()
			},
			gotoAddAddress() {
				uni.navigateTo({
					url: './addAddress?addressType=' + this.tabCurrentIndex
				})
			},
			deleteAddress(item) {
				uni.showModal({
					title: "提示",
					content: "地址删除后不可恢复，是否确认删除？",
					success: (res) => {
						if (res.confirm) {
							this.managerExpressAddress("DELETE", item)
						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					}
				})
			},
			updateAddress(item) {
				uni.navigateTo({
					url: './updateAddress?id=' + item.id
				})
			},
			managerExpressAddress(requestType, item) {
				let params = {
					requestType: requestType,
					id: item.id
				}
				this.$api.request.managerExpressAddress(params, (res) => {
					if (res.code == 200) {
						this.$api.msg("操作成功")
						this.senderList = [];
						this.receiverList = [];
						this.queryExpressAddress()
					}
				})
			},
			goToLast(addressInfo) {
				addressInfo.addressType = this.tabCurrentIndex
				let pages = getCurrentPages();
				let prevPage = pages[pages.length - 2];
				prevPage.$vm.loadUserAddress(addressInfo)
				uni.navigateBack()
			}
		}
	}
</script>

<style scoped lang='scss'>
	page {
		background-color: #FBFBFB;
	}

	.container {
		width: 100%;
		overflow: hidden;
	}

	/* 顶部tabbar */
	.nav-bar {
		width: 100%;
		display: flex;
		align-items: center;
		justify-content: center;
		position: relative;
		height: 90upx;
		white-space: nowrap;
		box-shadow: 0 2upx 8upx rgba(0, 0, 0, .06);
		background-color: #fff;

		.nav-item {
			display: inline-block;
			width: 250upx;
			height: 90upx;
			text-align: center;
			line-height: 90upx;
			font-size: 30upx;
			color: #303133;
			position: relative;

			&:after {
				content: '';
				width: 0;
				height: 0;
				border-bottom: 4upx solid #3E9CF9;
				position: absolute;
				left: 50%;
				bottom: 0;
				transform: translateX(-50%);
				transition: .3s;
			}
		}

		.current {
			color: #3E9CF9;

			&:after {
				width: 50%;
			}
		}
	}

	.panel-scroll-box {
		height: calc(100% - 10upx);
		position: absolute;
		top: 100upx;
		z-index: 10;
	}

	.swiper-box {
		height: 100%;
	}

	.record-box {
		height: 100%;
		padding: 0 20upx 20upx 20upx;

		.record-item {
			margin-top: 20upx;
			width: 100%;
			padding: 20upx;
			background-color: white;
			border-radius: 20upx;

			.info-name {
				display: flex;
				flex-direction: row;

				.item-class {
					font-weight: bold;
					font-size: 32upx;
					line-height: 60upx;
				}
			}

			.info-address {
				line-height: 40upx;
				margin-top: 10upx;
				border-bottom: 1px solid #EBEBEB;
				padding-bottom: 20upx;
			}

		}
	}

	.bottom_box {
		position: fixed;
		bottom: 40upx;
		right: 40upx;
		z-index: 99;
		width: 70upx;
		height: 70upx;
		border-radius: 40upx;
		color: white;
		font-weight: normal;
		background-color: #55aaff;
		line-height: 60upx;
		text-align: center;
		font-size: 50upx;
		box-shadow: #888888 5upx 5upx 5upx;
		border: 5upx solid #ffffff;
	}
</style>
